import Observer from "../common/Observer";
import pxmu from 'pxmu'

// 定义一个页数
let idx = 0;
// 定义一个变量 用于保存请求回来的所有用户的数据
let allUsersArr = [];
// 定义一个变量 保存最大页数
let allPages = 0;

// 获取元素
let allUsers = document.getElementById("allUsers")
// 发送请求   获取所有用户
fetch("/guyun/get_all_user")
    .then(res => res.json())
    .then(({ error, data }) => {
        // 判断data是否成功
        if (!error) {
            allUsersArr = data;
            // 获取用户数量 计算有多少个分页按钮
            allPages = Math.ceil(data.length / 8)
            // 先生成里面的每一页的按钮
            let btns = new Array(allPages).fill(0).map((val, index) => `<li class="page-item"><a class="page-link page" >${index + 1}</a></li>`).join("")
            pagination.innerHTML = `<li class="page-item ">
                                        <a class="page-link prev">上一页</a>
                                    </li>
                                        ${btns}
                                    <li class="page-item">
                                        <a class="page-link next">下一页</a>
                                    </li>`
            allUsers.innerHTML = data.slice(0, 8).map(val => `<div class="col-3">
                <div class="card">
                    <img src="${val.headpic}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${val.nickname}</h5>
                        <p class="card-text">我一把把把把住了</p>
                        <a  class="checkkkkkk btn btn-primary" data-target="${val.username}">查看该用户的相册</a>
                    </div>
                </div>
            </div>`).join('')
            return;
        }
        pxmu.fail(data)
    });


// 获取用户按钮
allUsers.onclick = async function (e) {
    if (e.target.className.includes("checkkkkkk")) {
        // 下面两种方式都可以获取元素的自定义属性  第一种适合所有自定义属性名  第二种适合 data-开头的自定义属性名
        // console.log(e.target.getAttribute("data-target"))
        // console.log(e.target.dataset.target)
        // 发送请求    获取某个用户的所有相册
        let res = await fetch('/guyun/get_someone_all_albums?authrization=' + localStorage.getItem("token") + "&target=" + e.target.dataset.target)
        let { error, data } = await res.json();
        console.log(res.json());
        if (!error) {
            return;
        }

        pxmu.fail("请登录");
    }
}


// 获取分页ul
let pagination = document.getElementById('pagination');

// 给分页按钮添加点击事件
// 委托模式
pagination.onclick = function (e) {
    console.log(e.target)
    if (e.target.className.includes("prev")) {
        // 上一页
        if (idx === 0) {
            pxmu.toast({
                msg: '已经是第一页了',
                location: "top"
            });
            return;
        }
        idx--;
        changePage();


    } else if (e.target.className.includes('next')) {
        // 判断
        if (idx === allPages - 1) {
            pxmu.toast({
                msg: '已经是最后一页了',
                location: "top"
            });
            return;
        }
        // 下一页
        idx++;

        changePage()
        // 

    } else if (e.target.className.includes("page")) {
        // 某一页
        idx = e.target.innerHTML - 1;
        changePage();
    }
}

function changePage() {
    allUsers.innerHTML = allUsersArr.slice(idx * 8, idx * 8 + 8).map(val => `<div class="col-3">
    <div class="card">
            <img src="${val.headpic}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">${val.nickname}</h5>
                <p class="card-text">我一把把把把住了</p>
                <a  class="checkkkkkk btn btn-primary" data-target="${val.username}">查看该用户的相册</a>
            </div>
        </div>
    </div>`).join('')
}